<template>
	<view class="container">
		<view v-if="checkPermi(['puyu:integral:add'])">
			<button class="uni-button" style="color:#ffffff;backgroundColor:#993399;borderColor:#993399;width: 100%;margin: 10rpx 0;"
				type="primary" @click="handleAddIntegral()">添加积分</button>
		</view>
		<uni-section title="搜索" type="line"></uni-section>
		<view class="query-form">
			<view class="query-item">
				<!-- <uni-easyinput v-model="queryParams.memberName" placeholder="请输入队员姓名" /> -->
				<uni-combox :candidates="memberNameRange" placeholder="请输入队员姓名" v-model="queryParams.memberName" @input="onMemberName"></uni-combox>
			</view>
			<!-- <view class="query-item">
				<uni-easyinput v-model="queryParams.phone" placeholder="请输入手机号" />
			</view> -->
			<view class="query-item">
				<button class="uni-button" size="mini" type="primary" @click="handleQuery">搜索</button>
			</view>
		</view>
		<uni-section :title="'积分明细:共 ' + total + ' 条'" type="line"></uni-section>
		<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th align="center">积分明细数据</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in integralList" :key="index">
				<uni-td>
					<view class="name">积分ID: {{ item.integralId }}</view>
					<view class="name">队员姓名: {{ item.memberName }}</view>
					<view class="name">手机号: {{ item.phone }}</view>
					<view class="name">积分: {{ item.integral }}</view>
					<view class="name remark">{{ item.remark }}</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-pagination :page-size="queryParams.pageSize" :current="queryParams.pageNum" :total="total" @change="change"
			prev-text="前一页" next-text="后一页" />
		<view class="page-sum">
			<text>当前页：{{ queryParams.pageNum }}，数据总量：{{ total }} 条，每页数据：{{ queryParams.pageSize }} 条</text>
		</view>
	</view>
</template>

<script>
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission";
  import { listIntegral } from "@/api/puyu/integral";
  import { allMemberintegral } from "@/api/puyu/memberintegral";
	import { parseTime } from '@/utils/common';
	export default {
		data() {
			return {
				// 遮罩层
				loading: true,
				// 总条数
				total: 0,
				// 积分数据
				integralList: null,
				// 队员数据
				memberList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 5,
					delFlag: null,
					memberName: null,
					phone: null,
				},
			}
		},
		computed: {
			memberNameRange() {
				if (!this.memberList) {
					return [];
				}
				let arr = [];
				this.memberList.map(item => {
					arr.push(item.phone + '-' + item.memberName);
				});
				return arr;
			},
		},
		onShow() {
			this.getList();
		},
		created() {
			// 获取队员下拉列表
			this.getMemberList();
		},
		methods: {
			checkPermi,
			checkRole,
			parseTime,
			// 获取队员积分列表
			getMemberList() {
				let params = {delFlag: '0'};
				allMemberintegral(params).then(response => {
					this.memberList = response.rows;
				});
			},
			onMemberName(e) {
				if (!e) {
					this.queryParams.phone = null;
					this.queryParams.memberName = null;
					return;
				}
				if (!this.memberList) {
					return;
				}
				let name = e.split("-")[1]
				let member = this.memberList.filter(item => item.memberName == name)[0];
				if (member) {
					this.queryParams.phone = member.phone;
					this.queryParams.memberName = member.memberName;
				}
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 查询课时点名列表 */
			getList() {
				this.loading = true;
				this.queryParams.orderByColumn = 'integralId'; //查询字段是表格中字段名字
				this.queryParams.isAsc = 'descending'; //动态取值排序顺序
				listIntegral(this.queryParams).then(response => {
					this.integralList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 添加积分 */
			handleAddIntegral() {
				this.$tab.navigateTo('/pages/puyu/integral/add-integral');
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.getData(e.current)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.queryParams.pageNum = pageCurrent
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef H5 */
	/* page {
	padding-top: 85px;
} */
	/* #endif */

	.page-sum {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.query-form {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		background-color: #ffffff;
		margin-bottom: 10px;
	}

	.query-item {
		margin: 5rpx;
		padding: 5rpx;
	}
	
	.query-item-value {
		margin-top: 5rpx;
		color: darkgray;
	}
	.remark {
		color: #993399;
		font-weight: bolder;
	}
</style>